﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat</title>
</head>
<body>
    <canvas id="mycanvas" width="1000" height="700" style="position: fixed; left: 0px; top: 0px;" />
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvas = document.getElementById("mycanvas"); //绘图区域
        let context = canvas.getContext("2d"); //绘图上下文
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        let gPaint = new FCPaint(); //绘图对象
        gPaint.canvas = canvas;
        scaleCanvas(gPaint);
        //判断是否移动端
        gPaint.isMobile = isMobileMode();
        if (gPaint.isMobile) {
            gPaint.scaleFactorX = 2.5;
            gPaint.scaleFactorY = 2.5;
        }
        
        gPaint.defaultUIStyle = "dark";
        addDefaultEvent(canvas, gPaint);

        /*
         * 重置大小
         */
        let resizeAll = function () {
            try {
                canvas.width = document.documentElement.clientWidth;
                canvas.height = document.documentElement.clientHeight;
                scaleCanvas(gPaint);
                updateViewDefault(gPaint.views);
            } catch (err) {
                
            }
            invalidate(gPaint);
        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };

        let dataList = new Array();

        /*
        * 请求历史数据
        */
        let queryHistoryData = function () {
            let url = "http://110.42.188.197:9968/quote?func=getkline&code=600000.SH&cycle=1";
            let xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", url, true);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                    let result = xmlhttp.responseText;
                    let strs = result.split("\r\n");
                    for(let i = 2; i < strs.length; i++){
                        let subStrs = strs[i].split(",");
                        if(subStrs.length >= 7){
                            let data = new SecurityData();
                            let date = new Date(subStrs[0] + " " + subStrs[1].substring(0, 2) + ":" + subStrs[1].substring(2, 4) + ":00");
                            data.open = parseFloat(subStrs[2]);
                            data.high = parseFloat(subStrs[3]);
                            data.low = parseFloat(subStrs[4]);
                            data.close = parseFloat(subStrs[5]);
                            data.volume = parseFloat(subStrs[6]);
                            data.date = date.getTime();
                            data.dateObj = date;
                            dataList.push(data);
                        }
                    }
                    invalidate(gPaint);
                }
            }
            xmlhttp.send(null);
        };

        /*
        * 绘制日的按钮
        * dayButton:日期按钮
        * paint:绘图对象
        */
        gPaint.onPaintCalendarDayButton = function (celendar, dayButton, paint) {
            if (dayButton.day) {
                let bounds = dayButton.bounds;
                if(bounds.right - bounds.left > 0){
                    let width = bounds.right - bounds.left;
                    let height = bounds.bottom - bounds.top;
                    let cDay = dayButton.day;
                    let year = cDay.year;
                    let month = cDay.month;
                    let day = cDay.day;
                    let dayStr = day.toString();
                    let tSize = paint.textSize(dayStr, dayButton.font);
                    paint.fillRect("rgb(25,25,25)", bounds.left + 2, bounds.top + 2, bounds.right - 2, bounds.bottom - 2);
                    if (dayButton.inThisMonth) {
                        paint.drawText(dayStr, "rgb(255,255,255)", dayButton.font, bounds.left + 10, bounds.top + 10);
                    } else {
                        paint.drawText(dayStr, "rgb(100,100,100)", dayButton.font, bounds.left + 10, bounds.top + 10);
                    }
                    if(dataList.length > 0){
                        let thisList = new Array();
                        for(let i = 0; i < dataList.length; i++){
                            let dateObj = dataList[i].dateObj;
                            let tDay = dateObj.getDate();
                            let tMonth = dateObj.getMonth() + 1;
                            let tYear = dateObj.getFullYear();	
                            if(day == tDay && month == tMonth && year == tYear){
                                thisList.push(dataList[i]);
                            }
                        }
                        if(thisList.length > 0){
                            let firstOpen = thisList[0].open;
                            let lastClose = thisList[thisList.length - 1].close;
                            if(firstOpen > 0){
                                let diffRange = 100 * (lastClose - firstOpen) / firstOpen;
                                let diffRangeStr = ((diffRange * lastClose) * 1000).toFixed(0) + "元";
                                if(diffRange > 0){
                                    diffRangeStr = "+" + diffRangeStr;
                                }
                                let dFont = "Default,16";
                                if(paint.isMobile){
                                    dFont = "Default,12";
                                }
                                let dSize = paint.textSize(diffRangeStr, dFont);
                                let dColor = "rgb(200,200,200)";
                                if(!dayButton.inThisMonth){
                                    dColor = "rgba(255,255,255,100)";
                                }
                                let maxValue = 0;
                                let minValue = 0;
                                for(let i = 0; i < thisList.length; i++){
                                    let data = thisList[i];
                                    if(i == 0){
                                        maxValue = data.open;
                                        minValue = data.open;
                                    }
                                    if(maxValue < data.high){
                                        maxValue = data.high;
                                    }
                                    if(minValue > data.low){
                                        minValue = data.low;
                                    }
                                }
                                let subValue = maxValue - minValue;
                                if(subValue > 0){
                                    let dR = Math.min(width / 4, height / 4);
                                    let dR2 = dR * 1.25;
                                    if(!paint.isMobile){
                                        dR = dR * 0.8;
                                    }
                                    let dLeft = bounds.left + width / 2 - dR;
                                    let dWidth = dR * 2;
                                    let midY = bounds.top + height / 2 + height / 10;
                                    if(paint.isMobile){
                                        midY += height / 10;
                                    }
                                    let dHeight = dR * 2;
                                    let dPoints = new Array();
                                    let lastColor = "";
                                    for(let i = 0; i < thisList.length; i++){
                                        let data = thisList[i];
                                        let x = dLeft + i * dWidth / thisList.length;
                                        let y = midY - (data.close - minValue) / subValue * dHeight;
                                        let point = new FCPoint(x, y);
                                        dPoints.push(point);
                                        let dColor2 = "";
                                        if(data.close >= firstOpen){
                                            dColor2 = "rgb(255,82,82)";
                                            if(!dayButton.inThisMonth){
                                                dColor2 = "rgba(255,82,82,50)";
                                            }
                                        }else if(data.close < firstOpen){
                                            dColor2 = "rgb(46,255,50)";
                                            if(!dayButton.inThisMonth){
                                                dColor2 = "rgba(46,255,50,50)";
                                            }
                                        }
                                        if(i == 0){
                                            lastColor = dColor2;
                                        }else{
                                            if(lastColor != dColor2 || i == thisList.length - 1){
                                                paint.drawPolyline(lastColor, 1, 0, dPoints);
                                                dPoints = new Array();
                                                dPoints.push(point);
                                                lastColor = dColor2;
                                            }
                                        }
                                    }
                                    if(!paint.isMobile){
                                        if(dayButton.inThisMonth){
                                            paint.drawEllipse("rgba(255,255,255,25)", 5, 0, bounds.left + width / 2 - dR2, bounds.top + height / 2 - dR2 - height / 10, bounds.left + width / 2 + dR2, bounds.top + height / 2 + dR2 - height / 10);
                                            dR2 -= 2;
                                            paint.drawEllipse("rgb(100,100,100)", 1, 0, bounds.left + width / 2 - dR2, bounds.top + height / 2 - dR2 - height / 10, bounds.left + width / 2 + dR2, bounds.top + height / 2 + dR2 - height / 10);
                                            dR2 += 5;
                                            paint.drawEllipse("rgb(100,100,100)", 1, 0, bounds.left + width / 2 - dR2, bounds.top + height / 2 - dR2 - height / 10, bounds.left + width / 2 + dR2, bounds.top + height / 2 + dR2 - height / 10);
                                        }else{
                                            paint.drawEllipse("rgba(255,255,255,15)", 5, 0, bounds.left + width / 2 - dR2, bounds.top + height / 2 - dR2 - height / 10, bounds.left + width / 2 + dR2, bounds.top + height / 2 + dR2 - height / 10);
                                            dR2 -= 2;
                                            paint.drawEllipse("rgba(100,100,100,100)", 1, 0, bounds.left + width / 2 - dR2, bounds.top + height / 2 - dR2 - height / 10, bounds.left + width / 2 + dR2, bounds.top + height / 2 + dR2 - height / 10);
                                            dR2 += 5;
                                            paint.drawEllipse("rgba(100,100,100,100)", 1, 0, bounds.left + width / 2 - dR2, bounds.top + height / 2 - dR2 - height / 10, bounds.left + width / 2 + dR2, bounds.top + height / 2 + dR2 - height / 10);
                                        }
                                    }
                                    if(!paint.isMobile){
                                        let dR3 = dR * 0.6;
                                        let dx = bounds.left + width / 6;
                                        let dy = bounds.top + height * 2 / 3;
                                        if(dayButton.inThisMonth){
                                            paint.fillEllipse("rgb(75,75,75)", dx - dR3, dy - dR3, dx + dR3, dy + dR3);
                                        }else{
                                            paint.fillEllipse("rgba(75,75,75,100)", dx - dR3, dy - dR3, dx + dR3, dy + dR3);
                                        }

                                        let pText = parseInt(Math.random() * 10 + 1).toString();
                                        let pFont = "Default,14";
                                        let pSize = paint.textSize(pText, pFont);
                                        if(dayButton.inThisMonth){
                                            paint.drawText(pText, "rgb(200,200,200)", pFont, dx - pSize.cx / 2, dy - pSize.cy / 2);
                                        }else{
                                            paint.drawText(pText, "rgba(200,200,200,100)", pFont, dx - pSize.cx / 2, dy - pSize.cy / 2);
                                        }

                                        let dx2 = bounds.left + width / 6;
                                        let dy2 = bounds.top + height * 2 / 5;
                                        let dR4 = width / 30;
                                        let dRect = new FCRect(dx2 - dR4, dy2 - dR4 / 2, dx2 + dR4, dy2 + dR4 / 2);
                                        if(dayButton.inThisMonth){
                                            if(diffRange >= 0){
                                                paint.fillRect("rgb(255,82,82)", dRect.left, dRect.top, dRect.right, dRect.bottom);
                                            }else{
                                                paint.fillRect("rgb(46,255,50)", dRect.left, dRect.top, dRect.right, dRect.bottom);
                                            }
                                        }else{
                                            if(diffRange >= 0){
                                                paint.fillRect("rgba(255,82,82,100)", dRect.left, dRect.top, dRect.right, dRect.bottom);
                                            }else{
                                                paint.fillRect("rgba(46,255,50,100)", dRect.left, dRect.top, dRect.right, dRect.bottom);
                                            }
                                        }
                                    }
                                }
                                paint.drawText(diffRangeStr, dColor, dFont, bounds.left + (width - dSize.cx) / 2, bounds.top + height - dSize.cy - height / 15);
                                if(!paint.isMobile){
                                    let rate = Math.random();
                                    let rWidth = width / 15;
                                    let rateRect = new FCRect(bounds.right - rWidth * 3, bounds.top + height / 7, bounds.right - rWidth * 2, bounds.bottom - height / 7);
                                    let dTick = Math.random() * 7;
                                    let pos = 0;
                                    for(let i = rateRect.bottom + 3; i >= rateRect.top; i--){
                                        if(dayButton.inThisMonth){
                                            if(pos <= dTick){
                                                paint.fillRect("rgb(100,100,100)", rateRect.left, i - 5, rateRect.right, i);
                                            }else{
                                                paint.fillRect("rgb(50,50,50)", rateRect.left, i - 5, rateRect.right, i);
                                            }
                                        }else{
                                            if(pos <= dTick){
                                                paint.fillRect("rgba(100,100,100,100)", rateRect.left, i - 5, rateRect.right, i);
                                            }else{
                                                paint.fillRect("rgba(50,50,50,100)", rateRect.left, i - 5, rateRect.right, i);
                                            }
                                        }
                                        i -= 7;
                                        pos++;
                                    }
                                }
                            }
                        }
                    }
                }
                paint.drawRect("rgb(50,50,50)", 1, 0, bounds.left + 2, bounds.top + 2, bounds.right - 2, bounds.bottom - 2);
            }
        };
        
        //解析加载XML
        let xml = `<?xml version="1.0" encoding="UTF-8"?>
        <html xmlns="facecat">
            <body>
            <calendar name="myCalendar" dock="fill"/>
            </body>
        </html>`;
        renderFaceCat(gPaint, xml);
        let calendar = findViewByName("myCalendar", gPaint.views);
        calendar.showWeekend = false;
        calendar.headDiv.backColor = "rgb(25,25,25)";
        calendar.headDiv.textColor = "rgb(255,255,255)";
        calendar.selectedDay = getYear(calendar.years, 2024).months.get(10).days.get(1);
        updateViewDefault(gPaint.views);
        invalidate(gPaint);
        queryHistoryData();
    </script>
</body>
</html>
